<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>在线支付</p>
		</header>
		<!-- 订单信息部分 -->
		<h3>订单信息：</h3>
		<div class="order-info">
			<p>
				{{orders.business.businessName}}
				<i class="fa fa-caret-down" id="showBtn"></i>
			</p>
			<p>&#165;{{orders.orderTotal}}</p>
		</div>
		<!-- 订单明细部分 -->
		<ul class="order-detailet" id="detailetBox">
			<li v-for="item in orders.list" :key="item.index">
				<p>{{item.food.foodName}} x {{item.quantity}}</p>
				<p>&#165;{{item.food.foodPrice*item.quantity}}</p>
			</li>
			<li>
				<p>配送费</p>
				<p>&#165;{{orders.business.deliveryPrice}}</p>
			</li>
		</ul>
		<!-- 支付方式部分 -->
		<ul class="payment-type">
			<li>
				<img src="../assets/alipay.png">
				<i class="fa fa-check-circle"></i>
			</li>
			<li>
				<img src="../assets/wechat.png">
			</li>
		</ul>
		<div class="payment-button">
			<button @click="toPay">确认支付</button>
		</div>
		<!-- 底部菜单部分 -->
		<Footer/>
	</div>
</template>
<script>
	import Footer from '../components/Footer.vue'
	export default {
		data() {
			return {
				businessId: this.$route.query.businessId,
				orderId: this.$route.query.orderId,
				orders: {
					business: {
						businessName: "",
						deliveryPrice: 0
					},
					list: [],
					orderTotal: 0
				}
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			this.getOrdersById();
		},
		methods: {
			getOrdersById() {
				//根据orderId查询订单信息
				this.$axios.post('OrdersController/getOrdersById', this.$qs.stringify({
					orderId: this.orderId,
				})).then(response => {
					this.orders = response.data;
				}).catch(error => {
					console.error(error);
				});
			},
			toPay() {
				let payflag = confirm("确定支付吗？");
				if (payflag == true) {
					//根据orderId支付
					this.$axios.post('OrdersController/updateorderState', this.$qs.stringify({
						orderId: this.orderId,
					})).then(response => {
						if (response.data == 1) {
							alert("支付成功！返回订单")
							// 页面跳转
							this.$router.push({
								path: '/orderList',
							})
						} else {
							alert("支付失败！")
						}
					}).catch(error => {
						console.error(error);
					});
				}
			}
		},
		computed: {},
		filters: {}
	}
</script>
<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}
	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/****************** 订单信息部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}
	.wrapper .order-info {
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .order-info p:last-child {
		color: orangered;
	}
	/****************** 订单明细部分 ******************/
	.wrapper .order-detailet {
		width: 100%;
	}
	.wrapper .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .order-detailet li p {
		font-size: 3vw;
		color: #666;
	}
	/****************** 支付方式部分 ******************/
	.wrapper .payment-type {
		width: 100%;
	}
	.wrapper .payment-type li {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .payment-type li img {
		width: 33vw;
		height: 8.9vw;
	}
	.wrapper .payment-type li .fa-check-circle {
		font-size: 5vw;
		color: #38CA73;
	}
	.wrapper .payment-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}
	.wrapper .payment-button button {
		width: 100%;
		height: 10vw;
		border: none;
		/*去掉外轮廓线*/
		outline: none;
		border-radius: 4px;
		background-color: #38CA73;
		color: #fff;
	}
	/****************** 底部菜单部分 ******************/
	.wrapper .footer {
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.wrapper .footer li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
		user-select: none;
		cursor: pointer;
	}
	.wrapper .footer li p {
		font-size: 2.8vw;
	}
	.wrapper .footer li i {
		font-size: 5vw;
	}
</style>